import { CSSProperties, useState } from "react"
import cs from 'classnames'
import { ColorType } from "./interface"
import { Color } from "./color"
import Palette from "./Palette"
import './index.scss'
import { useControllableValue } from "ahooks"

export interface ColorPickerProps {
    className?: string
    style?: CSSProperties,
    value?: ColorType
    defaultValue?: ColorType
    onChange?: (color: Color) => void
}

export default function ColorPickerPanel(props: ColorPickerProps) {
    const {
        className,
        style,
        value,
        onChange
    } = props;

    const [colorValue, setColorValue] = useControllableValue<Color>(props)

    function onPaletteColorChange(color:Color) {
        setColorValue(color)
        onChange?.(color)
    }

    const classNames = cs("color-picker", className);

    return <div className={classNames} style={style}>
        <Palette color={colorValue} onChange={onPaletteColorChange}/>
    </div>
}   